<script>
import { reactive , ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import "../assets/font-three/iconfont.css"
export default {
  setup() {
    let data = reactive({
      comment:JSON.parse(window.localStorage.getItem("comment")),
      detail:null,
      text:"",
    });
    
    let router = useRouter();
    let route = useRoute();
    
    let booksFun = () => {
      router.push("/shelf");
    };
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const id =route.query.itemId
    data.detail=data.comment.find((item)=>{
        return item.id==id
    })
    let add = () =>{
        console.log(data.text);
        data.detail.comment.unshift(
            {
                id:12,
                text:data.text,
                src:"https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg",
                name:"23uyy",
                time:"12/5",
                like:0
            }
        )
        show.value = false
    }
    let like = (index) =>{
        data.detail.comment[index].show=!data.detail.comment[index].show
        if(data.detail.comment[index].show){
            data.detail.comment[index].like+=1
        }
        else if(data.detail.comment[index].show==false && data.detail.comment[index].like>0){
            data.detail.comment[index].like-=1
        }
    }
    return {
      data,
      show,
      showPopup,
      booksFun,
      like,
      add
    };
  },
};
</script>

<template>
    <div class="comment">
        <div class="container">
            <header>
                <img @click="booksFun" src="../assets/imgs/back.png" alt="">
            </header>
            <div class="author">
                <div class="left">
                    <img :src="data.detail.src" alt="">
                    <div class="info">
                        <h4>{{data.detail.name}}</h4>
                        <p>{{data.detail.time}}</p>
                    </div>
                </div>
                <div class="btn">+ 关注</div>
            </div>
            <p class="text">{{data.detail.text}}</p>
            <div class="sth"></div>
            <h3 class="ft">全部评论 · {{data.detail.comment.length}}</h3>
            <div class="citem" v-for="(item,index) in data.detail.comment" :key="item.id">
                <div class="user">
                    <img :src="item.src" alt="">
                    <h5>{{item.name}}</h5>
                </div>
                <p class="ct">{{item.text}}</p>
                
                <div class="bottom">
                    <p class="time">{{item.time}}</p>
                    <i @click="like(index)" :class="['iconfont icon-aixin',item.show?' con':'']">{{item.like==0?'点赞':item.like}}</i>
                </div>
            </div>
            <div class="add" @click="showPopup">发表评论...</div>
            <van-popup
              v-model:show="show"
              round
              position="bottom"
              :style="{ height: '30%' }"
            >
            <div class="block">
                <form>
                    <textarea cols="41" rows="7" placeholder="发表评论..." v-model="data.text"></textarea>
                </form>
                <div class="box">
                    <div class="addbtn" @click="add">发表</div>
                </div>
            </div>
            </van-popup>
        </div>
    </div>
    <div class="tss"></div>
</template>

<style lang="scss" scoped>
header{
    img{
        margin: 10px;
        width: 20px;
        height: 20px;
    }
}
.author{
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    .left{
        display: flex;
        img{
            
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .info{
            margin-left: 10px;
            h4{
                font-size: 14px;
                font-weight: 800;
            }
            p{
                font-size: 12px;
                color: #dddddd;
            }
        }
    }
    .btn{
        width: 60px;
        height: 30px;
        background-color: #f5f7f5;
        color: #ea9a77;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        border-radius: 18px;
    }
}
.text{
    margin-top: 10px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 26px;

}
.sth{
    margin-top: 5px;
    width: 100%;
    height: 8px;
    background-color: #f7f7f7;
}
.ft{
    padding: 0 12px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 800;
}
.citem{
    padding: 0 12px;
    margin-top: 10px;
    .user{
        display: flex;
        align-items: center;
        img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        h5{
            font-size: 12px;
            margin-left: 10px;
            color: #979797;
        }
    }
    p.ct{
        font-size: 14px;
        margin-left: 35px;
        line-height: 20px;
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .time{
            margin-left: 35px;
            font-size: 12px;
            color: #dddddd;
        }
        i{
            font-size: 12px;
            color: #dddddd;
        }
        i.con{
            color: #f96825;
        }
    }
}
.add{
    position: fixed;
    bottom: 6px;
    left: 10px;
    border-radius: 14px;
    width: 90%;
    height: 30px;
    background-color: #f1f1f1;
    color: #979797;
    padding-left: 10px;
    font-size: 12px;
    line-height: 30px;
}
.block{
    textarea{
        margin: 12px;
        border-radius: 12px;
        padding: 5px;
        border: none;
        background-color: #f5f7f5;
    }
    .box{
        display: flex;
        justify-content: right;
        .addbtn{
        width: 60px;
        height: 30px;
        background-color: #f96825;
        border-radius: 6px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        margin-right: 16px;
    }
    }
}
.tss{
    height: 36px;
    width: 100%;
}
</style>